<template>
  <span>
    <el-dialog title="添加角色" :visible.sync="dialogFormVisible" @close='handleClose'>
      <!-- 表单 -->
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="管理角色" :label-width="formLabelWidth" prop="rolename">
          <el-input v-model="form.rolename" value="form.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="序号" :label-width="formLabelWidth" prop="roleorder">
          <el-input v-model="form.roleorder" type='number'  value="form.roleorder" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="管理权限" :label-width="formLabelWidth" prop="allowmodule">
          <el-checkbox-group v-model="form.allowmodule">
            <el-checkbox 
              :label="item.id" 
              v-for="item in checkBoxData"
              :key="item.id"
            >
              {{item.modulename}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>        
      </el-form>
      <!-- 确认按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </span>  
</template>
<script>
export default {
  name:'Add',
  data() {
    return {
      form: {
        rolename:'',
        roleorder:'',
        allowmodule:[]
      },
      checkBoxData:[],
      dialogFormVisible: true,
      formLabelWidth: '80px',
      rules: {
        rolename: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 4, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ], 
        roleorder: [
          { required: true, message: '角色排序必须是数字，且不能为空', trigger: 'blur' },
          { min: 1, max: 2, message: '长度在 1 到 2 个字符', trigger: 'blur' }
        ],
        allowmodule: [
          { required: true, message: '角色权限不能为空', trigger: 'blur' }
        ], 
      }    
    }
  },
  created(){
    const id=this.$route.query.id
    this.getRoleData()
  },
  methods:{
    getRoleData(){
      this.axios.get('/api/role/getrow',{
        params:{
          id:this.$route.query.id
        }
      }).then((res)=>{
        if(res.data.code==0){
          const data=res.data.data
          // 初始化数据
          this.checkBoxData=data.moduleData
        }else{
          this.message('服务器忙，请稍后重试','error')
        }
      }).catch((error)=>{
        this.message('服务器忙，请稍后重试','error')
      })
    },
    postRoleData(){
      this.axios.post('/api/role/create',{
        params:{
          rolename:this.form.rolename,
          roleorder:parseInt(this.form.roleorder),
          allowmodule:(this.form.allowmodule)
        }
      }).then((res)=>{
        // 添加成功
        this.message('添加成功','success')
      }).catch((error)=>{
        this.message('服务器忙，请稍后重试','error')
      })
    },    
    handleClose(){
      this.$router.go(-1)
    },
    handleCancel(){
      this.dialogFormVisible=false
    },
    submitForm(ruleForm){
      this.dialogFormVisible = false
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.postRoleData()
        } else {
          this.message('服务器忙，请稍后重试','error')
          return false;
        }
      });
    },
    // 失败提示
    message(msg,type){
      this.$message({
        message:msg,
        type
      })
    }
  }
}
</script>
<style scoped>

</style>